import React, { useEffect, useState } from 'react';
import { Divider, Spin } from 'antd';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import PropTypes from 'prop-types';

import CommonCard from '@/components/common/CommonCard';
import { getSuggestList } from '@/api/suggest';
import { homeMap, authMap, controllerMap, storage, urlMap, imagesMap } from '@/utils';
import { COLOR_THEME } from '@/config/theme';

// 通用展示页
export default function ShowPage(props) {
    const { type, cityId, showName, bgImage, pathUrl } = props;
    const [isLoading, setIsLoading] = useState(true);
    const [data, setData] = useState([]);
    const navigator = useNavigate();

    const getShowData = async () => {
        setIsLoading(true);
        try {
            if (type) {
                await getSuggestList(type, cityId).then((res) => {
                    if (res?.code === 200) {
                        setData(res?.data);
                    }
                });
            }
        } finally {
            setIsLoading(false);
        }
    };

    useEffect(() => {
        getShowData();
    }, [type, cityId]);

    return (
        <div
            style={{
                backgroundColor: `${COLOR_THEME.BG_SECONDARY}`,
                width: '100%',
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                overflow: 'auto',
            }}
        >
            <div
                style={{
                    backgroundImage: bgImage,
                    height: '33.33%',
                    width: '100%',
                    marginTop: 0,
                    backgroundSize: 'cover',
                    backgroundPosition: 'center',
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    justifyContent: 'flex-start',
                    position: 'relative',
                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                }}
            />
            <Divider
                style={{
                    borderColor: '#7cb305',
                    width: '40%',
                    margin: '0 30%',
                    minWidth: 300,
                    fontFamily: "'STXingkai', cursive",
                    fontSize: '30px',
                }}
            >
                {showName}
            </Divider>
            <div
                style={{
                    width: '63.3%',
                    height: '70.33%',
                    padding: '5px 1%',
                    display: 'flex',
                    flexWrap: 'wrap',
                    gap: '2%',
                    justifyContent: 'flex-start',
                }}
            >
                {isLoading && (
                    <div
                        style={{
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                            width: '100%',
                        }}
                    >
                        <Spin size="large" />
                    </div>
                )}
                {!isLoading &&
                    data?.map((item) => (
                        <div
                            key={item}
                            style={{
                                flex: '0 0 23%',
                                marginBottom: 3,
                            }}
                        >
                            <CommonCard
                                title={item?.title}
                                imageUrl={item?.coverPath}
                                baseUrl={pathUrl}
                                type={type}
                                cardId={item?.commendId}
                            />
                        </div>
                    ))}
            </div>
        </div>
    );
}

ShowPage.propTypes = {
    type: PropTypes.string.isRequired,
    showName: PropTypes.string.isRequired,
    bgImage: PropTypes.string.isRequired,
    cityId: PropTypes.string.isRequired,
    pathUrl: PropTypes.string.isRequired,
};
